<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import chinaJson from './china.json'

const chartsRef = ref<any>()

/**
 * 获取指定两点间圆弧上的点
 * @param  x1 起点经度
 * @param y1 起点纬度
 * @param x2 终点经度
 * @param y2 终点纬度
 * @param pointCount 要获取的点的数量
 * @param level 弧度大小标定值，0~∞ 0为半圆，越大越接近直线
 */
const getPoints = (
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  pointCount = 30,
  level = 2,
): any[] => {
  // 圆的方程, (x - a)2 + (y - b)2 = r2. 其中rSquare为r2
  let a,
    b,
    rSquare,
    k,
    kv,
    points = []
  points.push([x1, y1])
  if (x1 === x2) {
    a = x1 + (y2 - y1) * level
    b = y1 + (y2 - y1) / 2
    rSquare = (x1 - a) ** 2 + (y1 - b) ** 2
  } else if (y1 === y2) {
    a = x1 + (x2 - x1) / 2
    b = y1 - (x2 - x1) * level
    rSquare = (x1 - a) ** 2 + (y1 - b) ** 2
  } else {
    // xc: 中点X坐标, yc: 中点Y坐标, k: 垂直直线斜率, lenSquare: 中点到圆心距离的平方, l: 垂直直线方程(y=kx+l)中的l
    let xc = (x1 + x2) / 2,
      yc = (y1 + y2) / 2,
      lenSquare = ((x2 - x1) ** 2 + (y2 - y1) ** 2) * level ** 2
    k = (x2 - x1) / (y1 - y2)
    let l = yc - k * xc
    // 此处为一元二次方程三系数，ax2 + bx + c = 0, 其中 a1 为 a, b1 为 b, c1 为 c
    let a1 = 1 + k ** 2,
      b1 = 2 * k * (l - yc) - 2 * xc,
      c1 = xc ** 2 + (l - yc) ** 2 - lenSquare
    kv = -1 / k
    a =
      (-b1 +
        Math.sqrt(b1 ** 2 - 4 * a1 * c1) *
          ((kv > 0 && x2 > x1) || (kv < 0 && x2 < x1) ? 1 : -1)) /
      (2 * a1)
    b = k * a + l
    rSquare = (x1 - a) ** 2 + (y1 - b) ** 2
  }

  if (x1 === x2 || Math.abs(kv as number) > 1) {
    let yDistance = y2 - y1
    let yDis = yDistance / (pointCount + 1)
    for (let i = 0; i < pointCount; i++) {
      let y = y1 + yDis * (i + 1)
      let x = Math.sqrt(rSquare - (y - b) ** 2) * (y2 > y1 ? -1 : 1) + a
      points.push([x, y])
    }
  } else {
    let xDistance = x2 - x1
    let xDis = xDistance / (pointCount + 1)
    for (let i = 0; i < pointCount; i++) {
      let x = x1 + xDis * (i + 1)
      let y = Math.sqrt(rSquare - (x - a) ** 2) * (x2 > x1 ? 1 : -1) + b
      points.push([x, y])
    }
  }

  points.push([x2, y2])

  return points
}

const initCharts = () => {
  // 飞机的svg路径
  const planePath =
    'M563.4 623.8c0.8-13.8 16.6-9 16.6-9l124 25.2 256 97.4c0-48-7.6-53-18.8-61.4L576 414c0 0-9.8-120-9.8-225.8 0-49-23.6-156.2-54.2-156.2s-54.2 108.8-54.2 156.2c0 100.4-9.8 225.8-9.8 225.8L82.8 676c-14.2 10-18.8 15.4-18.8 61.4L320 640l123.8-25.2c0 0 15.8-4.8 16.6 9 0.8 13.8-2.4 138.2 11.8 204.2 1.8 8.8-5 9.4-9.6 14.8l-103.8 65.6c-3.4 3.8-5 14.6-5 14.6l-2 37 136-32 24 64 24-64 136 32-2-37c0.2 0-1.4-10.8-4.8-14.6l-103.8-65.6c-4.6-5.4-11.4-6-9.6-14.8C565.4 762 562.6 637.6 563.4 623.8z'

  echarts.registerMap('china', chinaJson as any)
  const myEcharts = echarts.init(chartsRef.value)
  const options = {
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.5,
      left: 'center',
      top: 200,
      label: {
        show: true,
        color: '#29fcff',
      },
      nameMap: {
        China: '中国',
      },
      itemStyle: {
        areaColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#1594E9', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#2E4F96', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        opacity: 0.9,
      },
      emphasis: {
        itemStyle: {
          color: '#96f853',
        },
        label: {
          fontSize: 18,
          color: '#ff48cc',
        },
      },
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    series: {
      type: 'lines',
      polyline: true,
      // smooth: true,
      data: [
        {
          coords: getPoints(116.41, 39.9, 121.51, 31.28),
        },
        {
          coords: getPoints(116.41, 39.9, 91.18, 29.72),
        },
        {
          coords: getPoints(116.41, 39.9, 121.58, 24.89),
        },
        {
          coords: getPoints(116.41, 39.9, 126.59, 45.86),
        },
        {
          coords: getPoints(116.41, 39.9, 113.45, 22.96),
        },
      ],
      // 统一的样式设置
      lineStyle: {
        color: echarts.color.modifyHSL('#007afe', Math.round(100)),
        width: 2,
        opacity: 0.8,
      },
      effect: {
        show: true,
        color: '#ffff18',
        symbol: 'path://' + planePath,
        symbolSize: 20,
        trailLength: 0,
        roundTrip: false,
      },
    },
  }
  myEcharts.setOption(options)
}

onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="data">
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<style scoped lang="scss">
.data {
  flex: 2.5;

  .charts {
    width: 100%;
    height: 740px;
  }
}
</style>
